<template>
  <div class="box">
    <van-nav-bar title="标题" left-text="返回" right-text="按钮" left-arrow />
    <div class="content">
      <div class="left">
        <van-sidebar v-model="leftCurrent">
          <van-sidebar-item
            v-for="item of leftList"
            :key="item.id"
            :title="item.mallCateforyName"
          />
        </van-sidebar>
      </div>
      <div class="right" style="width: 200px">
        <van-tabs v-model="rigthTopCurrent" class="sidebar-right">
          <van-tab
            class="Goodsview"
            v-for="item of topList"
            :key="item.id"
            :title="item.mallSubName"
          >
            <div v-for="items of list" :key="items.id" style="display: flex">
              <van-image
                :src="$resetUrl(items.pictureComperssPath)"
                style="
                  width: 100px;
                  height: 100px;
                  min-width: 34%;
                  min-height: 100%;
                "
                lazy-load
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error>加载失败</template>
              </van-image>

              <div>
                <p>{{ items.name }}</p>
                <p>{{ items.presentPrice }}</p>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <TabBar></TabBar>
  </div>
</template>

<script>
import {
  getCategoryList,
  getCategorySubList,
  getGoodsListByCategorySubID,
} from "../../apis/list.js";
export default {
  props: {
    idx: {
      type: String || Number,
    },
  },
  data() {
    return {
      leftCurrent: this.idx || 0, //初始键值
      rigthTopCurrent: 0, //初始键值
      leftList: [], //左边数据
      topList: [], //头部数据
      list: [], //内容
    };
  },
  methods: {
    API_getCategoryList() {
      //大数据类型
      return this.$http.request({
        url: getCategoryList,
        method: "GET",
      });
    },
    API_getCategorySubList(categoryId) {
      //小类数据接口
      return this.$http.request({
        url: getCategorySubList,
        method: "POST",
        data: {
          categoryId,
        },
      });
    },
    API_getGoodsListByCategorySubID(categorySubId) {
      //小类数据接口
      return this.$http.request({
        url: getGoodsListByCategorySubID,
        method: "POST",
        data: {
          categorySubId,
        },
      });
    },

    /////////优化请求代码
    async show(leftCurrent = 0, rigthTopCurrent = 0) {
      let res1 = await this.API_getCategoryList();
      this.leftList = res1.data.data;

      let res2 = await this.API_getCategorySubList(
        this.leftList[leftCurrent].id
      );
      this.topList = res2.data.data;

      let res3 = await this.API_getGoodsListByCategorySubID(
        this.topList[rigthTopCurrent].id
      );
      this.list = res3.data.data;
    },
  },
  watch: {
    leftCurrent: {
      async handler(val) {
        this.rigthTopCurrent = 0;
        this.show(val);
      },
      immediate: true,
    },
    rigthTopCurrent: {
      async handler(val) {
        this.show(this.leftCurrent, val);
      },
      immediate: true,
    },
  },
};
</script>

<style>
.content {
  display: flex;
}
.right {
  flex: 1;
}
/* .Goodsview > div{
  height: 80px;
} */
</style>